<template>
    <div>
        <h1>显示</h1>
        <a href="/add">新增</a>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>出生日期</th>
                    <th>年龄</th>
                    <th>头像</th>
                    <th>是否入职成功</th>
                    <th>状态</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data.list">
                    <th>{{ a.Codr }}</th>
                    <th>{{ a.Name }}</th>
                    <th>{{ a.Pwd }}</th>
                    <th>{{ a.DateTime }}</th>
                    <th>{{ a.Age }}</th>
                    <th><img :src="a.Img" width="100" height="100"></th>
                    <th>{{ a.IsAdmin == true ? '成功' : '未成功' }}</th>
                    <th>
                        <span v-if="a.ZTid == 1">出勤</span>
                        <span v-if="a.ZTid == 2">请假</span>
                        <span v-if="a.ZTid == 3">休假</span>
                        <span v-if="a.ZTid == 4">离职</span>
                    </th>
                    <th>{{ a.Sex == 1 ? '男' : '女' }}</th>
                    <td><input type="button" value="编辑" @click="xg(a.Id)"></td>
                </tr>
            </tbody>
        </table>
        <span>共{{ data.totalcount }}条</span>
        <span>每页{{ info.pagesize }}条</span>
        <span>共 {{ info.pageindex }}/{{ data.totalpage }}页</span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex - 1)">
        <span v-for="a in data.totalpage" @click="gopage(a)">{{ a }}</span>
        <input type="button" value="下一页" @click="gopage(info.pageindex + 1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="gopage(info.pageindex)">
        <select v-model="info.pagesize" @change="show">
            <option v-for="a in arr" :value="a">每页{{ a }}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
let info: any = reactive({
    pageindex: 1,
    pagesize: 2
})
let data: any = reactive({
    totalcount: 0,
    totalpage: 0,
    list: []
})
let arr: any = ref([2, 4, 6, 8])
onMounted(() => {
    getlist();
})
const getlist = () => {
    axios({
        url: '/api/User/All',
        method: 'get',
        params: info
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })

}
const show = () => {
    info.pageindex = 1;
    getlist();
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageindex = 1;
        return;
    }
    if (num > data.totalpage) {
        info.pageindex = data.totalpage
        return;
    }
    info.pageindex = num;
    getlist();
}
const xg = (id: any) => {
    router.push({
        path: '/update',
        query: {
            id: id
        }
    })
}
</script>

<style scoped></style>